---
description: Guide on how to use Google Analytics with a Manifest Version 3 browser extension
---

import { Callout } from "nextra-theme-docs"

# Quickstart with Google Analytics

Since Manifest V3 does not support [remote code execution](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/#remotely-hosted-code), it has been very difficult for developers to integrate Google Analytics into their extension project, especially with the latest [gtag4 version](https://developers.google.com/analytics/devguides/collection/ga4).

To overcome this issue, Plasmo [bundles remote code at build time](/framework/remote-code).

## Obtaining the Tracking/Measurement ID

You will first need to create a property to get the Tracking ID. During this process, Google will ask to provide a website URL - we suggest providing a subdomain of your domain. This ensures the data coming in is only from your properties - website/domain/extension.

<Callout emoji="♻️">
  You can reuse any property you own (for example, the website property you use
  to market your extension).
</Callout>

Then, to get the Measurement ID, visit your Google Analytics dashboard, and navigate to the Tagging Instructions section (Admin -> Setup Assistant -> Tag installation -> Data Streams -> Web):

![Measurement ID](@screenshots/gtag-measurement-id.png)

Click the button next to the Measurement ID, which should copy to your clipboard.

## Env Variable Setup

To properly store the Measurement ID, we recommend using [environment variables](/framework/env). Create an `.env.local` file:

```ini filename=".env.local"
PLASMO_PUBLIC_GTAG_ID=<paste in your measurement ID>
```

To get TypeScript IntelliSense, create an `index.d.ts` file:

```ts filename="index.d.ts"
declare namespace NodeJS {
  interface ProcessEnv {
    PLASMO_PUBLIC_GTAG_ID?: string
  }
}

interface Window {
  dataLayer: Array
  gtag: (a: string, b: any, c?: any) => void
}
```

## Using Google Analytics in a React component

Below is an example of how to implement the google tag tracking script in the popup page:

```tsx filename="popup.tsx"
import "https://www.googletagmanager.com/gtag/js?id=$PLASMO_PUBLIC_GTAG_ID"

import { useEffect, useState } from "react"

function IndexPopup() {
  const [data, setData] = useState("")

  useEffect(() => {
    window.dataLayer = window.dataLayer || []
    window.gtag = function gtag() {
      window.dataLayer.push(arguments) // eslint-disable-line
    }
    window.gtag("js", new Date())
    window.gtag("config", process.env.PLASMO_PUBLIC_GTAG_ID, {
      page_path: "/popup",
      debug_mode: true
    })

    window.gtag("event", "login", {
      method: "TEST"
    })
  }, [])

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <h1>
        Welcome to your <a href="https://www.plasmo.com">Plasmo</a> Extension!
      </h1>
      <input onChange={(e) => setData(e.target.value)} value={data} />
    </div>
  )
}

export default IndexPopup
```

The import statement and the code inside the `useEffect` is identical to what Google gives you (see image below). We adapted them into the React lifecycle. We also add the `window` object to make it work with Typescript.

![Measurement ID](@screenshots/gtag-code.png)

## Full Example

To see a complete example, check out [with-google-analytics](https://github.com/PlasmoHQ/examples/tree/main/with-google-analytics) in our examples repo.
